<template>
  <!-- 常用印章 -->
  <view>
    <view v-if="!!dataList && dataList.length > 0">
      <uni-card title="" :is-shadow="false" v-for="(item,index) in dataList" :key="index">
        <view style="display: flex;justify-content: space-between;">
          <img :src="'data:image/png;base64,' + item.image" alt="" class="sealImg">
          <uni-tag type="primary" text="默认印章" v-if="item.isDefault == 1" style="height: 28rpx;"/>
        </view>
        <p class="grid-integral" style="margin-top: 15rpx;">印章名称：{{ item.name }}</p>
        <p class="grid-integral">印章编号：{{ item.sealNumber }}</p>
        <p class="grid-integral">印章状态：
          <template v-for="(dictItem, index) in dicts.ec_company_seal_staus">
            <template v-if="item.status == dictItem.value">
              <uni-tag :text="dictItem.text" size="mini" :type="dictItem.type"/>
            </template>
          </template>
        </p>
        <p class="grid-integral">印章类型：{{ getSealTypeName(item.sealTypeId) }}</p>
        <p class="grid-integral">初始印章：
          <template v-for="(dictItem, index) in dicts.ec_is_system">
            <template v-if="item.isSystem == dictItem.value">
              <uni-tag :text="dictItem.text" :type="dictItem.type"/>
            </template>
          </template>
        </p>
        <p class="grid-integral">创建时间：{{ item.createTime }}</p>
        <p class="grid-integral">更新时间：{{ item.updateTime }}</p>
        <view slot="actions" class="card-actions">
          <view
              v-if="item.isDefault == 0 && item.status == 1"
              class="card-actions-item"
              @click.stop="handleDefaultSeal(item)">
            <uni-icons type="checkbox" size="18" color="#00a660"></uni-icons>
            <text class="card-actions-item-text themeColor">设为默认</text>
          </view>
          <view class="card-actions-item" @click="handleDetail(item)">
            <uni-icons type="eye" size="18" color="#00a660"></uni-icons>
            <text class="card-actions-item-text themeColor">查看详情</text>
          </view>
        </view>
      </uni-card>
      <!-- 加载更多 -->
      <uni-load-more color="#00a660" :status="loadStatus"/>
    </view>
    <!-- 暂无数据 -->
    <luanqingEmpty :show="true" text="没有更多数据啦" v-else/>
  </view>
</template>

<script>
import {listNormalSealCompany, updateSealCompanyDefault} from "@/api/ec/console/seal/sealCompany";
import {listByCompanyId} from "@/api/ec/console/seal/sealType";
import {getDictsByNameForUni} from "@/utils/dicts";
import luanqingEmpty from '@/components/luanqing-empty/luanqing-empty';

export default {
  name: "sealCommon",
  components: {luanqingEmpty},
  props: {
    // 查询参数
    name: {
      type: String,
    },
  },
  data() {
    return {
      // 数据字典
      dicts: {
        ec_company_seal_staus: [],
        ec_is_system: [],
      },
      // 加载样式：more-加载前样式，loading-加载中样式，nomore-没有数据样式
      loadStatus: 'loading',
      // 印章类型
      sealTypeList: [],
      // 数据列表
      dataList: [],
      //总条数
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: '',
      },
    }
  },
  beforeDestroy() {
    this.unbindingRefreshData();
  },
  created() {
    this.bindingRefreshData();
    this.getDicts();
    this.getSealType();
    this.handleQuery();
  },
  methods: {
    /**加载数据字典*/
    getDicts() {
      this.dicts.ec_company_seal_staus = getDictsByNameForUni("ec_company_seal_staus");
      this.dicts.ec_is_system = getDictsByNameForUni("ec_is_system");
    },
    /** 绑定 */
    bindingRefreshData() {
      // 刷新页面数据
      uni.$on('refreshSealCommon', () => {
        this.handleQuery();
      });
    },
    /** 解除绑定 */
    unbindingRefreshData() {
      uni.$off('refreshSealCommon');
    },
    /** 查询印章类型列表 */
    getSealType() {
      listByCompanyId().then(response => {
        this.sealTypeList = response.data
      });
    },
    /** 根据id获取印章类型名称 */
    getSealTypeName(id) {
      if (this.sealTypeList == null) {
        return "";
      }
      for (let i = 0, len = this.sealTypeList.length; i < len; i++) {
        let item = this.sealTypeList[i];
        if (item.id == id) {
          return item.name;
        }
      }
      return "";
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.getList(true);
    },
    /**
     * 查询列表
     * @param reload true 重新加载数据； false 加载更多
     */
    getList(reload) {
      if (reload) {
        this.queryParams.pageNum = 1;
        this.loadStatus = 'more'
        this.$modal.loading();
      }
      this.queryParams.name = this.name;
      listNormalSealCompany(this.queryParams).then(response => {
        if (reload) {
          uni.hideLoading()
        }
        this.total = response.total;
        if (response.total > 0) {
          const dataRows = response.rows;
          this.dataList = reload ? dataRows : this.dataList.concat(dataRows);
        } else {
          this.dataList = [];
        }
        // 判断数据是否加载完全
        if (response.total <= this.dataList.length) {
          this.loadStatus = 'noMore'
        }
        // 页数+1
        this.queryParams.pageNum++
      }).catch(() => {
        if (reload) {
          uni.hideLoading()
        }
      });
    },
    /** 上拉刷新回调 */
    loadMore() {
      if (this.loadStatus != 'noMore' && this.total > this.dataList.length) {
        this.loadStatus = 'loading';
        // 延迟500毫秒显示loading效果
        setTimeout(() => {
          // 执行查询的方法
          this.getList(false);
        }, 500)
      } else {
        // 停止加载
        this.loadStatus = 'noMore'
      }
    },
    /** 新增按钮操作 */
    handleAdd() {
      uni.navigateTo({url: './sealAdd'});
    },
    /** 查看详情 */
    handleDetail(item) {
      uni.navigateTo({url: './detail?id=' + item.id});
    },
    /** 设置默认印章 */
    handleDefaultSeal(item) {
      let id = item.id;
      let isDefault = 1;
      const param = {id, isDefault}
      this.$modal.loading();
      updateSealCompanyDefault(param).then(() => {
        uni.hideLoading()
        this.handleQuery();
        this.$modal.msgSuccess("默认签名设置成功！");
      }).catch(() => {
        uni.hideLoading()
        this.$modal.msgError("默认签名设置失败，请稍后重试！")
      });
    },
  }
}
</script>

<style lang="scss" scoped>
.sealImg {
  height: 200rpx;
}
</style>
